<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border:none;
        }
        .box{
            width: 400px;
            height: 300px;
            margin:100px auto;
            border:1px solid #ccc;

        }
        .box li{
            width: 100px;
            height: 100px;
            text-align: center;
            margin-top: 50px;
            float: left;
            overflow: hidden;

        }
        .box li span{
            width: 24px;
            height: 24px;
            display: inline-block;
            position: relative;



            /*background: url("images/bg.png") 0 -24px  no-repeat;*/

        }
    </style>
</head>
<body>
<div class="box">

    <ul>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>淘宝</p></li>
        <li><span></span><p>新浪</p></li>
        <li><span></span><p>网易</p></li>
        <li><span></span><p>搜狐</p></li>
        <li><span></span><p>腾讯</p></li>
        <li><span></span><p>优酷</p></li>
        <li><span></span><p>京东</p></li>
    </ul>


</div>
<script src="jquery-3.1.1.js"></script>
<script>
    $(function () {
        /*1.设置span的图片,遍历li,设置span的图片*/
        $('li').each(function (index,ele) {
            var url = 'url("images/bg.png") 0 -'+24*index+'px  no-repeat';
            /*1.1获取每一个span设置图片*/
            $(ele).find('span').css({background:url});
        });
        /*2.当移入到li中的时候设置动画*/
        $('li').mouseenter(function () {
            /*2.1让对应的标签设置位置为-20,当动画完成后,设置对应的top和opaciyt属性:top = 20,opcity = 0,然后在设置动画返回初始位置
            * 第一个this表示li,第二个表示span*/
            $(this).find('span').stop().animate({top:-20},function () {
                $(this).css({top:20,opacity:0}).stop().animate({top:0,opacity:1});
            })
        })
    })
</script>

</body>
</html>